<template>
  <base-module
    class="personnel-info-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <histogram :options="options"></histogram>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';
import Histogram from '../echarts/base';

// 人员情况
export default {
  name: 'personnelInfoComp',
  props: {
    title: {
      type: [String, Object],
      default: '人员情况'
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      personList: [],
      total: 0
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    echartsData() {
      let personList = [];
      const otherList = [];
      if (this.personList.length > 4) {
        personList = this.personList.slice(0, 4);
        const personListTotal = personList.reduce((pre, next) => {
          return pre + next.count;
        }, 0);
        otherList.push({
          count: this.total - personListTotal,
          job: '其它'
        });
      } else {
        personList = this.personList;
      }
      const list = [...personList, ...otherList];
      return {
        yAxisData: list.map(v => v.job),
        data: list.map(v => v.count)
      };
    },
    options() {
      return {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          data: this.echartsData.yAxisData,
          show: true,
          // 轴线
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          },
        },
        series: [
          {
            type: 'bar',
            data: this.echartsData.data,
            barWidth: '50%',
            barCateGoryGap: '3%',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#213e92'
              }, {
                offset: 0.4,
                color: '#b37dfb'
              }])
            },
            label: {
              position: 'right',
              show: true,
              color: 'orange'
            }
          }
        ]
      };
    }
  },
  created() {
    this.getAttendanceStatisticsByJob();
  },
  components: {
    Histogram,
    BaseModule
  },
  methods: {
    async getAttendanceStatisticsByJob() {
      const { success, data: { data }} = await this.$Model.getAttendanceStatisticsByJob({
        project_id: this.projectId,
        begin_day:  this.$moment().format('YYYY-MM-DD'),
        end_day: this.$moment().format('YYYY-MM-DD')
      });
      if (success && Array.isArray(data) && data[0]) {
        const classification = data[0].classification || [];
        this.personList = classification.sort((a, b) => b.count - a.count);
        this.total = data[0].total || 0;
      }
    },
    handleClick() {
      this.$router.push('/personnel/overview');
    }
  }
};
</script>
